import React from 'react';
import 'moment/locale/zh-cn';
import u from '../common.js';
import { exportExcel } from 'xlsx-oc'
import locale from 'antd/lib/date-picker/locale/zh_CN';
import { Button, DatePicker, Pagination, Modal, Select, Upload, message, Popover } from 'antd';
import moment from 'moment';
import '../static/fraudSms.less'
const Option = Select.Option;
const { RangePicker } = DatePicker;

const props = {
  name: 'file',
  action: u.url.importTable,
  headers: {
    authorization: 'authorization-text',
  },
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`导入成功`);
      window.location.reload();
    } else if (info.file.status === 'error') {
      message.error(`导入失败`);
    }
  },
};

class FraudSms extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      content: '',
      timeValue: [],
      publishTime: '',
      endTime: '',
      list: [],
      total: null,
      currentCount: 0,
      page: 1,
    }
  }

  componentDidMount() {
    console.log(u.importTable)
    this.getDetail()
  }

  onContent(e) {
    this.setState({
      content: e.target.value
    })
  }

  onChangeDate = (date, dateString) => {
    if (dateString[0] === '' && dateString[1] === '') {
      this.setState({
        timeValue: ['', ''],
        publishTime: '',
        endTime: ''
      })
      return
    }
    this.setState({
      publishTime: dateString[0].split(' ')[0],
      endTime: dateString[1].split(' ')[0],
      timeValue: [moment(dateString[0]), moment(dateString[1])]
    })
  }

  onChangeSize = (page) => {
    let currentCount = (page -1) * 10
    this.setState({
      currentCount: currentCount,
      page: page
    },() =>{
      this.getDetail()
    })
  }

  onreset() {
    this.setState({
      endTime: '',
      publishTime: '',
      content: '',
      currentCount: 0,
      timeValue: []
    },() =>{
      this.getDetail()
    })
  }

  onSearch() {
    this.setState({
      currentCount: 0
    },data =>{
      this.getDetail()
    })
  }

  getDetail() {
    let currentCount = this.state.currentCount
    let endTime = this.state.endTime
    let publishTime = this.state.publishTime
    let content = this.state.content
    console.log(content, currentCount, publishTime, endTime)
    u.getfraudsms({
      startTime: publishTime,
      endTime: endTime,
      currentCount: currentCount,
      pageSize: 10,
      content: content
    }, data => {
      this.setState({
        list: data.list,
        total: data.total,
      })
      console.log(this.state.total)
    })
  }

  onGotoCapture(id, num) {
    console.log(id, num)
    const w = window.open('about:blank');
    // w.location.href = 'http://localhost:3000/#/Postbar'
    w.location.href = u.baseUrl + 'build/index.html#/Postbar'
    localStorage.setItem("ID", id)
    localStorage.setItem("NUM", num)
  }

  content(item) {
    return (
      <div className='tishiStyle'>
        {item.publish_time ? <div>发布时间：{item.publish_time}</div> : ''}
        {item.qq ? <div>QQ：{item.qq}</div> : ''}
        {item.vx ? <div>微信：{item.vx}</div> : ''}
        {item.e_mail ? <div>邮箱：{item.e_mail}</div> : ''}
        {item.phone ? <div>电话号码：{item.phone}</div> : ''}
        {item.domain ? <div>域名{item.domain}</div> : ''}
        {item.qqGroup ? <div>QQ群：{item.qqGroup}</div> : ''}
      </div>
    )
  }

  exportDefaultExcel = () => {
    let endTime = this.state.endTime
    let publishTime = this.state.publishTime
    let content = this.state.content
    u.exportExcelListByTime({
      startTime: publishTime,
      endTime: endTime,
      content: content
    }, data => {
      console.log(data)
      let dataSource = []
      dataSource = data.list.map((el, index) => {
        return {
          key: index + 1,
          qq: el.qq == null ? '' : el.qq,
          qqQun: el.qqGroup == null ? '' : el.qqGroup,
          justNumber11: el.vx ==null ? '' : parseInt(el.vx,10) && (el.vx.length == 11) ? el.vx: '',
          justNumber: el.vx ==null ? '' : (el.vx.length !== 11) && (el.vx/1 == el.vx) ? el.vx: '',
          letter: el.vx ==null ? '' : !(el.vx/1 == el.vx) ? el.vx: '',
          phone: el.phone == null ? '' : el.phone,
          yuming: el.domain == null ? '' : el.domain,
          content: el.content == null? '' : el.content
        }
      })

      var _headers = [{ k: 'qq', v: 'QQ' }, { k: 'qqQun', v: 'qq群' } , { k: 'letter', v: '含字母微信号' }, { k: 'justNumber11', v: '11位纯数微信号' },
      { k: 'justNumber', v: '其他纯数微信号' },{ k: 'phone', v: '电话号码' }, { k: 'yuming', v: '域名' }, { k: 'content', v: '短信内容' }]
      exportExcel(_headers, dataSource);
    })
  }

  onChangeDate = (value, dateString) => {
    if (dateString[0] === '' && dateString[1] === '') {
        this.setState({
            timeValue: ['',''],
            publishTime: '',
            endTime: ''
        })
        return
    }
    this.setState({
        publishTime: dateString[0],
        endTime: dateString[1],
        timeValue: [moment(dateString[0]),moment(dateString[1])]
    })
}

  onImport() { }

  onChangeWord(e) {
    this.setState({
      content: e.target.value
    })
  }

  render() {
    return (
      <div className="fraudSms">
        <Modal title="判黑" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel}>
          <p>确定判黑吗？</p>
        </Modal>

        <Modal title="判白" visible={this.state.visible2} onOk={this.handleOk2} onCancel={this.handleCancel2}>
          <p>确定判白吗？</p>
        </Modal>

        <div className="searchNum">
          <div>共搜索到<span>{this.state.total}</span>条数据</div>
          <div className="btnStyle">
            <span>短信内容：</span><input value={this.state.content} onChange={this.onChangeWord.bind(this)} type="text" className='shuRu'/>
            <span className='daorushijian'>导入时间：</span>
            <RangePicker
              showTime={{format: 'HH:mm'}}
              format="YYYY-MM-DD HH:mm"
              placeholder={['开始时间', '结束时间']}
              value={this.state.timeValue}
              onChange={this.onChangeDate}
            />
            <Button type="primary" style={{ color: 'white' }} onClick={() => this.onSearch()}>查询</Button>
            <Button  onClick={() => this.exportDefaultExcel()}>导出</Button>
            <Upload {...props}>
              <Button className="" style={{ marginRight: '20px' }} onClick={this.onImport.bind(this)}>导入</Button>
            </Upload>
            <Button onClick={() => this.onreset()}>重置</Button>
          </div>
        </div>
        <table className='table_list'>
          <thead>
            <tr className="activee">
              <td><div className="numStyle">编号</div></td>
              <td><div className="contentStyle">源地址</div></td>
              <td><div className="source">
                短信内容
                {/* <Select style={{ width: 100 }} value='来源' onChange={this.changeSource.bind(this)}>
                  <Option value="all">全部</Option>
                  <Option value="website">重点网站</Option>
                  <Option value="searchEngine">搜索引擎</Option>
                  <Option value="circleFriends">朋友圈</Option>
                </Select> */}
              </div>
              </td>
              <td><div className="website">导入时间</div></td>
              <td><div className="mesStyle">截获内容</div></td>
            </tr>
          </thead>
          <tbody>
            {
              this.state.list.map((el, index) => {
                return (
                  <tr key={index}>
                    <td><div className="numStyle">{((this.state.page - 1) * 10) + index + 1}</div></td>
                    <td><div className="contentStyle">{el.address}</div></td>
                    <td><div className="source" style={{ cursor: 'pointer' }}>
                      <Popover content={this.content(el)} title={el.account_nickname} trigger="hover">
                        {el.description ? el.description : el.content}
                      </Popover>
                    </div></td>
                    <td><div className="website">{el.import_time}</div></td>
                    <td><div className="mesStyle">{(el.qq ? 'QQ：' + el.qq + ' ' : '') + (el.qqGroup ? 'QQ群：' + el.qqGroup + ' ' : '') + (el.vx ? '微信：' + el.vx + ' ' : '') + (el.phone ? '电话号码：' + el.phone + ' ' : '') + (el.e_mail ? '邮箱：' + el.e_mail + ' ' : '') + (el.domain ? '域名：' + el.domain + ' ' : '')}</div></td>
                  </tr>
                )
              })
            }
          </tbody>
        </table>
        <div className="fengYe">
          <Pagination onChange={this.onChangeSize} defaultCurrent={1} total={this.props.total ? this.props.total - 1 : this.state.total - 1} />
        </div>
      </div>
    )
  }
}

export default FraudSms